<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Product</title>
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
	<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
	
</head> 
<body>
   <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'north'" style="height:3	0px">
        	   <a href="#" id="loadAllDataBtn" class="easyui-linkbutton" data-options="iconCls:'icon-add'">所有产品</a>
        		<a href="#" id="addBtn" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加产品</a>
        		<a href="#" id="removesBtn" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除所选</a>
        		<!--搜索框-->
			        <input class="easyui-searchbox" data-options="prompt:'Please Input Value',searcher:doSearch" style="width:200px">
				<!---->
        </div>
        <div data-options="region:'west',split:true" title="产品分类" style="width:200px;">
    		<!--产品分类界面-->
    		<ul id="tt"></ul>
        </div>
        <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
            <table id="dg"></table>
            <table id="comment"></table>
            <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed:true" style="width:500px;height:400px;padding:10px">
		        <form id="ff" method="post" style="height: 280px;">
		            <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="_id" style="width:100%" data-options="label:'_Id:'">
		                <input class="easyui-textbox" name="title" style="width:100%" data-options="label:'产品名称:',required:true">
		                <input class="easyui-textbox" name="price" style="width:100%" data-options="label:'产品价格:',required:true">
		                <input class="easyui-textbox" name="count" style="width:100%" data-options="label:'产品数量:',required:true">
		            </div>
		        </form>
		        <div style="text-align:center;padding:5px 0">
		            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">提交</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">清空</a>
		        </div>
		    </div>
        </div>
    </div>
<script>
   	var cateId = null;
	$('#tt').tree({
		url: "http://localhost:3000/cate/list/2",
		method: 'get',
		onClick: function(node) {
			cateId = node._id;
			console.log(cateId);
			$("#dg").datagrid({
				queryParams: {
					cateid: cateId
				}
			}).datagrid('reload');
		}
	});
	
	$('#dg').datagrid({
		url: 'http://localhost:3000/product/list',
		method: 'post',
		queryParams: {
			cateid: cateId
		},
		fit: true,
		pagination: true,
		pageSize: 5,
		pageList: [5, 10, 15],
		columns: [
			[{
					field: 'ck',
					title: '复选',
					checkbox: true
				},
				{
					field: 'title',
					title: '产品名称',
					width: 100
				},
				{
					field: 'price',
					title: '价格',
					width: 50
				},
				{
					field: 'count',
					title: '库存',
					width: 50
				},
				{
					field: 'operate',
					title: '操作',
					width: 130,
					formatter: function(value, row, index) {
						return "<a onclick=deleteData('" + row._id + "')>删除</a>  <a onclick=editData('" + row._id + "')>修改</a>  "
					}
				}
			]
		]
	});
	//添加产品
	$("#addBtn").click(function() {
        $('#ff').form('clear');
		if(cateId === null) {
			$.messager.show({
				title: '信息提示',
				msg: '请选择分类，否则无法添加商品',
				timeout: 3000,
				showType: 'show'
			});
		} else {
			$('#dlg').dialog('open');
		}
	})
	
	//提交按钮
	function submitForm() {
		var postData = $("#ff").serializeJSON();
		postData.cateid = cateId;
		if(postData._id.length > 0) {
			delete postData.cateid;
			// edit 信息修改
			$.ajax({
				type: "put",
				url: "http://localhost:3000/product/data/" + postData._id,
				data: postData,
				async: true
			}).done(function(res) {
				console.log(res);
				// 这里要做一件事
				$.messager.show({
					title: '信息提示',
					msg: '数据修改成功',
					timeout: 3000,
					showType: 'show'
				});
				$('#dlg').dialog('close');
				$('#dg').datagrid('reload');
			})
	
		} else {
			// add 信息添加
			delete postData._id;
			$.ajax({
				type: "post",
				url: "http://localhost:3000/product/data",
				data: postData,
				async: true
			}).done(function(res) {
				// 这里要做一件事
				$.messager.show({
					title: '信息提示',
					msg: '数据添加成功',
					timeout: 3000,
					showType: 'show'
				});
				$('#dlg').dialog('close');
				$('#dg').datagrid('reload');
			})
		}
	}
	
	function clearForm() {
		$('#ff').form('clear');
	}
	
	function deleteData(id) {
		$.messager.confirm('确认删除', '你确认删除数据吗？', function(r) {
			if(r) {
				$.ajax({
					type: "delete",
					url: "http://localhost:3000/product/data/" + id,
					async: true
				}).done(function(res) {
					$("#dg").datagrid('reload');
				})
			}
		});
	}
	
	function editData(id) {
		$.ajax({
			type: "put",
			url: "http://localhost:3000/product/data/" + id,
			async: true
		}).done(function(res) {
			$('#ff').form('load', res);
			$('#dlg').dialog('open');
		})
	}
	//删除多条新闻
	$("#removesBtn").click(function() {
		var rows = $("#dg").datagrid('getSelections');
		if(rows.length > 0) {
			$.messager.confirm('确认删除', '你确认删除数据吗？', function(r) {
				if(r) {
					var ids = [];
					rows.forEach(function(item, idx) {
						ids.push(item._id)
					})
					console.log(ids);
					$.ajax({
						type: "post",
						url: "http://localhost:3000/product/removes",
						data: {
							ids: ids.toString()
						},
						async: true
					}).done(function(res) {
						$("#dg").datagrid('reload');
					})
				}
			});
		}
	})
	
	$("#loadAllDataBtn").click(function() {
		cateId = null;
		$("#dg").datagrid({
			queryParams: {
				cateid: cateId
			}
		}).datagrid('reload');
	})
	
	function doSearch(value) {
		$("#dg").datagrid({
			queryParams: {
				cateid: cateId,
				title: value
			}
		}).datagrid('reload');
	}
</script>
</body>
</html>